import React, { Component } from 'react';

// 导入请求
import { Signin } from '../api/index'
// 映入样式
import '../styles/DengLu/Login.css'
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '', pass: ''
        }
    }

    // 回调事件
    handleChang(e) {
        //onchange触发难道输入框的值,value属性拿到最新的值
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    // 通过点击事件来发请求
    login() {
        console.log(this.state);
        // 发请求
        Signin({ phone: this.state.phone, pass: this.state.pass }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
                this.props.history.push({ pathname: '/Index/Home' })
            } else {
                return alert('登录失败')
            }
        })
    }

    //跳路由到注册页
    register() {
        this.props.history.push({ pathname: '/register' })
    }
    render() {
        return (
            <div className='Login'>
                <div className='title'>登录页</div>
                <div className='box'>
                    <input name="phone" value={this.state.phone} onChange={(e) => { this.handleChang(e) }} type="text" placeholder='输入手机号' />
                </div>
                <div className='box'>
                    <input name="pass" value={this.state.pass} onChange={(e) => { this.handleChang(e) }} type="text" placeholder='输入密码' />
                </div>
                <div className='box1'>   <input type="button" value="登录" onClick={() => { this.login() }} /></div>
                <div className='box2' onClick={() => { this.register() }}>
                    <span>去注册</span>
                </div>
            </div>
        );
    }
}

export default Login;